<template>
  <div class="article-list-by-tag-warp">
    <el-row type="flex" class justify="center">
      <el-col :span="18">
        <div class="article-list-by-tag-content-warp">
          <el-row type="flex" class justify="space-between">
            <el-col :span="17">
                <div class="article-list-by-tag-left-warp">
                    <articleList :ListData="articleListData"></articleList>
                    <div v-if="moreDataIsShow">
                        <div  v-if="isHaveData" ><el-button class="more-comment-btn" @click="moreDataBtnClick" type="primary" :loading="isloading">{{isloading?"加载中":"点击加载更多"}}</el-button></div>
                        <div v-else><el-button class="have-no-data-info" disabled>已经没有了呀</el-button></div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
              <div class="article-list-by-tag-right-warp">
                <sideBar>
                    <template v-slot:sideBarHeader>
                        <div class="author-img-warp">
                            <el-avatar :size="120" fit="fill" :src="authorInfo.userImg"></el-avatar>
                        </div>
                        <div class="author-nickName-warp">
                            <span class="author-nickName">{{authorInfo.userNickName}}</span>
                        </div>
                    </template>
                    <template v-slot:sideBarMain>
                        <div class="author-discription-warp">
                            <h3 class="author-discription-title">个人简介</h3>
                            <p class="author-discription">{{authorInfo.description}}</p>
                        </div>
                        <div class="author-tags-warp">
                            <h3 class="author-tags-title">文章标签</h3>
                            <div class="author-tag-list">
                                <div class="author-tag-list-item" v-for="(item,index) in tagListData" :key="index">
                                    <a href="javascript:;" @click="tagClick(item.tagId)">{{item.tagName}}</a>
                                </div>
                            </div>
                            <div>
                                <el-link @click="moreTagDataLinkClick" :disabled="!isHaveTagListData">{{isHaveTagListData?"加载更多":"已经没有了"}}<i class="el-icon--right" :class="{'el-icon-arrow-down':!tagDataIsLoading,'el-icon-loading':tagDataIsLoading}"></i> </el-link>
                            </div>
                        </div>
                    </template>
                </sideBar>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {request} from '@/network/request.js';
import articleList from '@/components/articleList';
import sideBar from '@/components/sideBar';
export default {
    name: "ArticleListByTag",
    components:{
        articleList,
        sideBar
    },
    data() {
        return {
            index:0,
            currentTagId:"",
            articleListData:[],
            authorInfo:{},
            tagListData:[],
            isHaveData:true,
            isloading:false,
            isHaveTagListData:true,
            tagDataIsLoading:false,
            tagListIndex:0,
            moreDataIsShow:false
        };
    },
    methods:{
        moreTagDataLinkClick(){
            this.tagDataIsLoading=true;
            this.tagListIndex++;
            request({
                url:"/tag/tagList/"+this.$route.query.authorId+"/"+this.tagListIndex
                }).then(res=>{
                    console.log(res);
                    if(res.data.tagList.length>0){
                    //拿过来的数据去重
                        let obj={};
                        this.tagListData=this.tagListData.concat(res.data.tagList).reduce((item,next)=>{
                            obj[next.tagId]?"":obj[next.tagId]=true&&item.push(next);
                            return item;
                            },[]);
                        this.tagDataIsLoading=false;
                        this.isHaveTagListData=true;
                    }else{
                        this.tagDataIsLoading=false;
                        this.isHaveTagListData=false;
                    }
                }).catch(err=>{
                    console.log(err);
                    this.$message.error('获取数据失败，请稍后再试');
                    this.tagDataIsLoading=false;
                    this.isHaveTagListData=true;
                    this.tagListIndex--;
                })
        },
        moreDataBtnClick(){
            this.isloading=true;
            this.index++;
            request({
                url:"/article/articleListByTag/"+this.currentTagId+"/"+this.index
            }).then(res=>{
                console.log(res);
                if(res.data.articleList.length>0){
                    this.articleListData=this.articleListData.concat(res.data.articleList);
                    this.isloading=false;
                    this.isHaveData=true;
                }else{
                    this.isloading=false;
                    this.isHaveData=false;
                }
            }).catch(err=>{
                console.log(err);
                this.$message.error('获取数据失败，请稍后再试');
                this.isloading=false;
                this.isHaveData=true;
                this.index--;
            })
        },
        tagClick(tagId){
            request({
            url:"/article/articleListByTag/"+tagId+"/0",
        }).then(res=>{
            // console.log(res);
            this.currentTagId=tagId;
            this.articleListData=res.data.articleList;
            this.index=0;
            this.isloading=false;
            this.isHaveData=true;
            this.$message({
                message: '数据加载成功',
                type: 'success'
                });
        }).catch(err=>{
            console.log(err);
            this.$message.error('数据加载失败');
        })
        }
    },
    created() {
        this.currentTagId=this.$route.query.tagId;
        request({
            url:"/article/articleListByTag/"+this.currentTagId+"/"+this.index,
        }).then(res=>{
            // console.log(res);
            this.articleListData=res.data.articleList;
            if(res.data.articleList.length>=7){
                this.moreDataIsShow=true;
            }
        }).catch(err=>{
            console.log(err);
        })
        request({
            url:"/user/userInfo/"+this.$route.query.authorId,
        }).then(res=>{
            // console.log(res);
            this.authorInfo=res.data.userInfo;
        }).catch(err=>{
            console.log(err);
        })
        request({
            url:"/tag/tagList/"+this.$route.query.authorId+"/0"
        }).then(res=>{
            this.tagListData=res.data.tagList;
        }).catch(err=>{
            console.log(err);
        })
    }
};
</script>

<style>
.article-list-by-tag-warp {
    margin: 30px 0;
}
.article-list-by-tag-right-warp,.article-list-by-tag-left-warp {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    padding: 20px;
    min-height: 900px;
}
</style>